<template>
    <el-tree-select
      filterable
      v-model="selectedValue"
      :data="dataList"
      clearable
      :multiple="multiple"
      :props="defaultProps" 
      @change="handleChange"
      node-key="value"
      :disabled="disabled"
      :check-strictly="true"
      highlight-current
      :render-after-expand="false"
      :style="`width: ${inputWidth}`"
    />
  </template>
  
  <script lang="ts" setup>
  import { ref,defineProps, onMounted ,defineEmits,watch} from 'vue'
  // import { apiGetDeptTree } from '@/api/user'
  import { apiQueryTree } from '@/api/modules/GM.js'
  const emits = defineEmits(['select-node'])
  const selectedValue = ref('')
  const dataList = ref([])
  const props = defineProps({
    //业务需要什么数据，获取对应的数据，默认orgEname
    id: {
        type: String,
        default: 'orgEname',
    },
    inputWidth:{
      type: String,
      default: '300px',
    },
    //是否多选
    multiple:{
      type: Boolean,
      default: false,
    },
    //数据回显
    selectVal:{
      type: Array,
      default: ()=>[],
    },
    //是否禁止编辑
    disabled:{
      type: Boolean,
      default: false,
    },
    //传过来的数据
    value:{
      type: String,
      default: '',
    }
  })
    const defaultProps = ref({
      children: 'children',
      label: 'label'
    });
  // const transformData = (node) => {
  //   console.log(node,'nodenode')
  //   const newNode = {
  //     value: node.nodeNo,
  //     label: node.nodeLabel,
  //     children: []
  //   };

  //   if (node.subNodes && node.subNodes.length > 0) {
  //     newNode.children = node.subNodes.map(subNode => transformData(subNode));
  //   } else {
  //     delete newNode.children; // 删除空的 children 属性
  //   }
  //   return newNode;
  // };
  const transformData = (node) => {
    const newNode = {
      value: node.payload ? node.payload.categoryId : "",
      categoryCode:node.payload ? node.payload.categoryCode :"",
      label: node.payload ? node.payload.categoryName : node.nodeLabel,
      children: []
    };

    if (node.subNodes && node.subNodes.length > 0) {
      newNode.children = node.subNodes.map(subNode => transformData(subNode));
    } else {
      delete newNode.children; // 删除空的 children 属性
    }
    return newNode;
  };
  const getTagList = async() => {
      const {data} = await apiQueryTree({categoryName: ''})
      if(data.success){
          // dataList.value = data.data.subNodes
          dataList.value = [transformData(data.data)];
      }
  }
  const handleChange = (value) => {
    console.log(value,'value123')
      console.log('Selected Value:',selectedValue.value);
      emits('select-node', selectedValue.value);
    };
  watch(() => props.value,(newValue, ) => {
    if (newValue == '') {
      selectedValue.value = ''
    }
    },
    // { deep: true } // 开启深度监听，因为数组或对象内部属性的改变浅层监听可能无法捕获
  )
  watch(() => props.selectVal,(newValue, ) => {
    selectedValue.value = props.selectVal
    console.log(props.selectVal,'props.selectVal')
    console.log(selectedValue.value,'selectedValue.value')
    // for(let i of props.selectVal){
    //   if(i.orgId){//兼容传过来的数据是否有key
    //     selectedValue.value.push(i.orgId)
    //   }else{
    //     selectedValue.value.push(i)
    //   }
      
    // }
    },
    { immediate:true, deep: true } // 开启深度监听，因为数组或对象内部属性的改变浅层监听可能无法捕获
  )
  onMounted(()=>{
    // console.log(props.selectVal,'selectVal=======')
    // for(let i of props.selectVal){
    //   if(i.orgId){//兼容传过来的数据是否有key
    //     selectedValue.value.push(i.orgId)
    //   }else{
    //     selectedValue.value.push(i)
    //   }
      
    // }
    // console.log(selectedValue,'selectedValue')
    getTagList()
  })
  </script>